import { Breadcrumbs, Grid, IconButton, Link, Paper } from "@material-ui/core";
import { ArrowUpward, Refresh } from "@material-ui/icons";
import React from "react";
import './Navigator.css';

export interface NavigatorProps {
    cwd: string[];

    refresh: () => void;
    upDir: () => void;
}

export default class Navigator extends React.Component<NavigatorProps, any> {
    render() {
        const crumb = this.props.cwd.map((it, k) => (<Link key={k} href={'#'}>{it}</Link>));
        return (
            <Paper className={'nav'}>
                <Grid container spacing={1}>
                    <Grid item>
                        <IconButton aria-label={'refresh'} onClick={() => this.props.refresh()}>
                            <Refresh />
                        </IconButton>
                        <IconButton aria-label={'up'} onClick={() => this.props.upDir()}>
                            <ArrowUpward />
                        </IconButton>
                    </Grid>
                    <Grid item xs className={'crumb'}>
                        <Breadcrumbs>
                            {crumb}
                        </Breadcrumbs>
                    </Grid>
                </Grid>
            </Paper>
        );
    }
}
